import React from 'react';
import { Layout, Breadcrumb, Icon, Button, Table, Checkbox, Modal, Input, Select, Form, Pagination, message, TreeSelect, Tree, Tabs, DatePicker } from 'antd';
import { Link } from 'react-router';
import './special.less';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const TreeNode = Tree.TreeNode;
const InputGroup = Input.Group;
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;

class specialForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            addClassify: false, //增加分类弹出层
            modifyClassify: false, //修改分类弹出层
            deleteClassify: false, //删除，启用，停用，同步弹出层
            categoryid: "", //分类
            categoryData: [], //所有分类
            pagesize: 20,
            pageindex: 1,
        }
    }

    componentDidMount() {

    }

    //增加分类事件
    addClassification() {
        this.setState({
            addClassify: true,
        });
    }
    addHandleOk() {
        this.setState({
            addClassify: false,
        });
    }
    addHandleCancel() {
        this.setState({
            addClassify: false,
        });
    }

    //修改分类事件
    modifyClassification() {
        this.setState({
            modifyClassify: true,
        });
    }
    modifyHandleOk() {
        this.setState({
            modifyClassify: false,
        });
    }
    modifyHandleCancel() {
        this.setState({
            modifyClassify: false,
        });
    }

    //删除，启用，停用，同步弹分类事件
    deleteClassification() {
        this.setState({
            deleteClassify: true,
        });
    }
    deleteHandleOk() {
        this.setState({
            deleteClassify: false,
        });
    }
    deleteHandleCancel() {
        this.setState({
            deleteClassify: false,
        });
    }

    //选择分类
    changeCategory(value) {
        this.setState({
            categoryid: value
        })
    }

    // 分页
    changePage(pageindex) {
        this.setState({
            pageindex
        }, () => {

        });
    }

    //改变每页条数
    handleSizeChange(current, pageSize) {
        this.setState({
            pageindex: 1,
            pagesize: pageSize
        }, () => {

        });
    }

    //新增
    addFloor() {
        window.location.hash = `/specialDetail/0`
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys });
            },
            getCheckboxProps: record => ({
                disabled: record.CustomerSourceCount > 0,
            }),
        };
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        const columns = [{
            title: '专场编号',
            dataIndex: 'spNumber',
            width: '7%',
        }, {
            title: '专场名称',
            dataIndex: 'spName',
            width: '7%',
        }, {
            title: '专场位置',
            dataIndex: 'spPosition',
            width: '7%',
        }, {
            title: '关联类型',
            dataIndex: 'associationType',
            width: '7%',
        }, {
            title: '活动编号',
            dataIndex: 'activityNumber',
            width: '7%',
        }, {
            title: '活动名称',
            dataIndex: 'activityName',
            width: '7%',
        }, {
            title: '开始时间',
            dataIndex: 'startTime',
            width: '8%',
        }, {
            title: '结束时间',
            dataIndex: 'endTime',
            width: '8%',
        }, {
            title: '创建人',
            dataIndex: 'founder',
            width: '7%',
        }, {
            title: '创建时间',
            dataIndex: 'founderTime',
            width: '8%',
        }, {
            title: '审核人',
            dataIndex: 'auditor',
            width: '7%',
        }, {
            title: '审核时间',
            dataIndex: 'auditorTime',
            width: '8%',
        }, {
            title: '状态',
            dataIndex: 'state',
            width: '7%',
        }];
        const dataList = [{}];
        return (
            <Form>
                <div className='goods-label' style={{ minWidth: 1250 }}>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>营销管理</Breadcrumb.Item>
                                <Breadcrumb.Item>专场管理</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div>
                            <Tabs defaultActiveKey="1">
                                <TabPane tab="移动商城" key="1">
                                    <div className='clearfix member-content-Search'>
                                        <div className='addetd addetd-z addetd-gjh'>
                                            <FormItem>
                                                {
                                                    getFieldDecorator('txt_Inkey', {
                                                        initialValue: ""
                                                    })(
                                                        <Input className='addetd-a-r' addonBefore="专场编号" placeholder="请输入" />
                                                    )
                                                }
                                            </FormItem>
                                        </div>
                                        <div className='addetd addetd-bb indtner uogt-btr'>
                                            <InputGroup compact>
                                                <Input addonBefore="专场位置" />
                                                <Select defaultValue="请选择" style={{ marginLeft: 20 }} >
                                                    <Option value="全部">全部</Option>
                                                    <Option value="首页专场">首页专场</Option>
                                                    <Option value="无固定位置">无固定位置</Option>
                                                </Select>
                                            </InputGroup>
                                        </div>
                                        <div className='addetd addetd-bb indtner uogt-btr'>
                                            <InputGroup compact>
                                                <Input addonBefore="&nbsp;状态&nbsp;" />
                                                <Select defaultValue="请选择" style={{ marginLeft: 3 }} >
                                                    <Option value="待审核">待审核</Option>
                                                    <Option value="审核通过">审核通过</Option>
                                                    <Option value="审核不通过">审核不通过</Option>
                                                    <Option value="已上线">已上线</Option>
                                                    <Option value="已下线">已下线</Option>
                                                </Select>
                                            </InputGroup>
                                        </div>
                                        <div className='addetd addetd-bb indtner uogt-btr'>
                                            <InputGroup compact>
                                                <Input addonBefore="关联类型" />
                                                <Select defaultValue="请选择" style={{ marginLeft: 20 }} >
                                                    <Option value="为空">为空</Option>
                                                    <Option value="专场">专场</Option>
                                                    <Option value="商品/服务">商品/服务</Option>
                                                    <Option value="链接地址">链接地址</Option>
                                                    <Option value="搜索关键词">搜索关键词</Option>
                                                    <Option value="分类">分类</Option>
                                                    <Option value="品牌">品牌</Option>
                                                </Select>
                                            </InputGroup>
                                        </div>
                                    </div>
                                    <div className='clearfix member-content-Search'>
                                        <div className='addetd addetd-z addetd-gjh'>
                                            <FormItem>
                                                {
                                                    getFieldDecorator('txt_Inkey', {
                                                        initialValue: ""
                                                    })(
                                                        <Input className='addetd-a-r' addonBefore="专场名称" placeholder="请输入" />
                                                    )
                                                }
                                            </FormItem>
                                        </div>
                                        <div className='addetd addetd-z addetd-gjh'>
                                            <FormItem>
                                                {
                                                    getFieldDecorator('txt_Inkey', {
                                                        initialValue: ""
                                                    })(
                                                        <Input className='addetd-a-r' addonBefore="创建人" placeholder="请输入" />
                                                    )
                                                }
                                            </FormItem>
                                        </div>
                                        <div className='addetd addetd-a addr-yo' style={{ marginRight: 0 }} >
                                            <InputGroup compact>
                                                <span className='chengge-a fkov-a'>创建时间</span>
                                                <div className='chengge-d' style={{ marginRight: 0 }}>
                                                    <RangePicker
                                                        placeholder={['请选择日期', '请选择日期']}
                                                        format='YYYY-MM-DD HH:mm'
                                                        value={this.state.registerDate}
                                                    />
                                                </div>
                                            </InputGroup>
                                        </div>
                                    </div>
                                    <div className='clearfix member-content-Search'>

                                        <div className='addetd addetd-z addetd-gjh'>
                                            <FormItem>
                                                {
                                                    getFieldDecorator('txt_Inkey', {
                                                        initialValue: ""
                                                    })(
                                                        <Input className='addetd-a-r' addonBefore="审核人" placeholder="请输入" />
                                                    )
                                                }
                                            </FormItem>
                                        </div>
                                        <div className='addetd addetd-a addr-yo' style={{ marginRight: 0 }} >
                                            <InputGroup compact>
                                                <span className='chengge-a fkov-a'>审核时间</span>
                                                <div className='chengge-d' style={{ marginRight: 0 }}>
                                                    <RangePicker
                                                        placeholder={['请选择日期', '请选择日期']}
                                                        format='YYYY-MM-DD HH:mm'
                                                        value={this.state.registerDate}
                                                    />
                                                </div>
                                            </InputGroup>
                                        </div>
                                        <Button type="primary" style={{ marginLeft: 50 }} className='member-button' icon="search" >查询</Button>
                                        <Button type="primary" className='member-button' icon="reload" >重置</Button>
                                    </div>
                                    <div className='clearfix'>
                                        <div className='chengge-e'>
                                            <Button className='member-button-aa' type='primary' onClick={() => this.addFloor()} style={{ marginLeft: 20 }}>新增</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.modifyClassification.bind(this)}>修改</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>删除</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>审核</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>审核不通过</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>上线</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>下线</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>导出</Button>
                                            <Button className='member-button-aa' type='primary' onClick={this.deleteClassification.bind(this)}>复制</Button>
                                        </div>
                                    </div>
                                    <div className='clearfix backendt'>
                                        <div className='allgoods-table clearfix'>
                                            <Table
                                                rowSelection={rowSelection}
                                                columns={columns}
                                                dataSource={dataList}
                                                pagination={false}
                                                bordered
                                            />
                                        </div>
                                    </div>
                                    <div className='goods-label-let'>
                                        <div className="floor-ppagi">
                                            {
                                                this.state.goodsinfocount == 0 ?
                                                    <p className="floor-ppagip">
                                                        共{this.state.goodsinfocount}条记录
                                </p>
                                                    :
                                                    <p className="floor-ppagip">
                                                        当前显示
                                    {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                                    {this.state.pagesize * this.state.pageindex < this.state.goodsinfocount ? this.state.pagesize * this.state.pageindex : this.state.goodsinfocount}条记录，
                                    共{this.state.goodsinfocount}条记录
                                </p>
                                            }
                                            <Pagination
                                                current={this.state.pageindex}
                                                total={this.state.goodsinfocount || 1}
                                                defaultPageSize={this.state.pagesize}
                                                onChange={this.changePage.bind(this)}
                                                showSizeChanger
                                                pageSizeOptions={['20', '50', '100']}
                                                onShowSizeChange={(current, pageSize) => this.handleSizeChange(current, pageSize)}
                                            />
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="PC商城" key="2">
                                </TabPane>
                            </Tabs>
                        </div>

                    </div>
                    <Modal title="修改"
                        visible={this.state.modifyClassify}
                        onOk={this.modifyHandleOk.bind(this)}
                        onCancel={this.modifyHandleCancel.bind(this)}
                        width='700px'
                    >
                        <div className='detleti'>
                            <p>确认是否进行修改操作！</p>
                            <p>系统只支持对“待审核”、“审核未通过”及“已下线”但还未到结束时间的广告进行修改！</p>
                            <p>已上线的广告不允许修改！</p>
                        </div>
                    </Modal>
                    <Modal title="删除/审核/审核不通过/上线/下线/导出/复制"
                        visible={this.state.deleteClassify}
                        onOk={this.deleteHandleOk.bind(this)}
                        onCancel={this.deleteHandleCancel.bind(this)}
                    >
                        <div className='detleti'>
                            <p>确认是否进行删除操作！</p>
                            <p>系统只支持对“待审核”、“审核未通过”的广告进行删除！</p>
                            <p>确认是否进行审核未通过操作！</p>
                            <p>系统只支持对“待审核”的广告进行审核未通过的操作！</p>
                            <p>确认是否进行上线操作！</p>
                            <p>确认是否进行下线操作！</p>
                            <p>确认是否进行复制操作！</p>
                        </div>
                    </Modal>
                </div>
            </Form>
        )
    }
}

const Special = Form.create()(specialForm);
export default Special;